<script setup lang="ts">
import { reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useQuery } from "@/hooks/init";
import { useShare } from "@/hooks/share";
import { detail_api } from "@/package/other/api/help_center";

import PageSticky from "@/components/page/sticky.vue";

onLoad((options) => {
  useQuery<{ id: string; name: string }>(
    options as MiniApp.AppLaunchOption,
    (query) => {
      detail_api({ id: query.id }).then((resp) => {
        infoData.content = resp.content.replace(
          /\<img/gi,
          '<img class="detail-content-img" '
        );

        shareOption.title = resp.title;
      });
      infoData.title = decodeURIComponent(query.name);

      shareOption.data = { id: query.id, name: query.name };
    }
  );
});

const infoData = reactive({ title: "", content: "" });

const { onShareAppMessage, onShareTimeline, shareOption } = useShare(
  "/package/other/pages/question/detail"
);
</script>

<template>
  <PageSticky>
    <view class="detail-title">{{ infoData.title }}</view>
  </PageSticky>

  <view class="detail-content">
    <rich-text :nodes="infoData.content" />
  </view>
</template>

<style lang="scss">
page {
  background-color: #ffffff;
}

.detail-title {
  padding: 30rpx;
  font-size: 36rpx;
  color: #333333;
  line-height: 48rpx;
  font-weight: bold;
}

.detail-content {
  padding: 0 30rpx 40rpx;
  font-size: 30rpx;
  color: #333333;
  line-height: 48rpx;

  .detail-content-img {
    display: block;
    width: 100%;
  }
}
</style>